<template>
  <div class="fill-width flex-col">
    <div style="flex: 1; overflow-y: auto; overflow-x: hidden;">
      <el-row :gutter="24" style="margin-bottom: 0px !important;">
        <el-col :xs="12" :sm="8" :md="4" :lg="3" :xl="2" v-for="(item, index) in tableDataList" :key="index" style="padding-top: 9px;padding-bottom: 9px;" >
          <el-card :body-style="{ padding: '0px' }" shadow="hover" style="height: 220px;">
            <div slot="header" class="clearfix flex-row" v-if="isSelect"  @click.stop="clickItems(item)">
              <el-checkbox v-model="item.selected" @click.native="clickItems(item)"></el-checkbox>
              <div class="flex-1"  @click.stop="clickItems(item)"></div>
              <div class="flex-row" style="margin:0" v-if="isEdit">
<!--                <el-button type="text" class="button" @click.stop="downImage(item.id)" style="color:#4CAF50;margin-left: 10px">下载</el-button>-->
                <el-button type="text" class="button" @click.stop="copyPath(item)" style="color:#4CAF50;margin-left: 10px">复制</el-button>
                <el-button type="text" class="button" @click.stop="deleteImage(item.id)" style="color: red;margin-left: 10px">删除</el-button>
              </div>
            </div>

            <LazyLoadImage
              class="image"
              fit="contain"
              :src="getPreviewPath(item.id,item)"
              @click.stop="clickItems(item)"
              :preview-src-list="srcList"
              :lazy="true"
            >
            </LazyLoadImage>

            <div class="title_content"  @click.stop="clickItems(item)">
<!--              <span :title="item.title">{{item.title}}</span>-->
              <span :title="item.tag">{{item.tag}}</span>
            </div>
          </el-card>
        </el-col>
        <el-empty description="无数据" v-if="tableDataList.length <= 0"></el-empty>
      </el-row>
    </div>
    <div class="fill-width">
      <el-divider style="margin: 5px 0px;"></el-divider>

      <div class="flex-row">
        <div class="flex-row">
          <span>全选/反选：</span>
          <el-checkbox v-model="selectedAll" @change="selectedAllChange"></el-checkbox>
        </div>
        <pagination
          :total="total"
          :page-sizes="[100, 200, 300, 500]"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getTablePage"
          style="margin: 0!important; height: 100%; padding: 0!important; position: unset;"
        />

      </div>
    </div>

  </div>
</template>

<script>
import {deleteByIds, getPage, updateImage} from '@/api/imgManage/image'
import ItemForm from "@/views/imgManage/imgInfoManage/itemForm.vue";
import LazyLoadImage from '@/components/LazyLoadImage'

export default {
  name: '',
  components: { ItemForm,LazyLoadImage },
  props: {
    typeId: {},
    isSelect: {
      default: () => false
    },
    isEdit: {
      default: () => true
    },
    isTagsStatus: {},
    extQueryParams: {

    }
  },
  data() {
    return {
      mode: 'add',
      selectedAll: false,
      imageObj:{},
      open: false,
      currentDate: new Date(),
      tableDataList: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 100,
      },
    }
  },
  computed: {
    selectData(){
      return this.tableDataList.filter(item => item.selected)
    },
    srcList(){
      return this.tableDataList.map(item => this.getPreviewPath(item.id,item))
    }
  },
  methods: {
    editItem(){
    },
    getPreviewPath(id,item){
      if(item?.fileid?.startsWith("http")){
        return item.fileid
      }
      return this.$config.urlFormat('/openApi/previewByBussId?bussid=' + id)
    },
    clickItems(item){
      this.$set(item,'selected',!item.selected)
    },
    handleSizeChange(val) {
      this.getTablePage()
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.getTablePage()
      console.log(`当前页: ${val}`);
    },
    resetSelectData(){
      this.tableDataList?.forEach(item => item.selected = false)
    },
    getAllSelectData(){
      return this.tableDataList.filter(item => item.selected)
    },
    selectedAllChange(){
      this.$nextTick(() => {
       setTimeout(() => {
         this.tableDataList.forEach(item => this.$set(item,'selected',this.selectedAll))
       },50)
      })
    },
    getTablePage(){
      this.tableDataList = []
      if(!this.typeId){
        this.typeId = ''
      }
      const queryParams = Object.assign(this.queryParams,this.extQueryParams,{ allimgtypeid: this.typeId })
      if(this.isTagsStatus){
        queryParams.isTagsStatus = this.isTagsStatus
      }
      getPage(queryParams).then(res => {
        this.tableDataList = res.rows
        this.total = res.total
      })
    },
    downImage(id){

    },
    async copyPath(item) {
      const imageSrc = item.fileid
      try {
        await navigator.clipboard.writeText(imageSrc);
        this.$message.success('复制成功')
      } catch (error) {
        console.error('复制失败:', error);
      }
    },
    deleteImage(ids){
      if(!ids){
        ids = this.tableDataList
          .filter(item => item.selected)
          .map(item => item.id)
          .join(",")
      }
      if(ids.length === 0){
        return this.$modal.msgWarning("请选择数据！");
      }

      this.$confirm(`确定要删除这${ ids.split(',')?.length }条吗？`, '提示', { type: 'warning' }).then(
        () => {
          this.$modal.loading("正在删除，请稍候...");
          deleteByIds(ids).then(res => {
            if(res.code == 200){
              this.getTablePage()
              this.$modal.msgSuccess("删除成功！");
            } else {
              this.$modal.msgError("删除失败！");
            }
            this.$modal.closeLoading()
          }).catch(e => {
            this.$modal.closeLoading()
          })
        }
      )
    },
    updateImage(data){
      updateImage(data).then(res=>{
        this.getTablePage()
      });
    },
    init(){
      this.getTablePage()
    },
  },
  mounted() {
    this.init()
  }
}
</script>


<style scoped lang="scss">
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.title_content{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding: 14px;
  text-align: center;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
  height: 120px;
  object-fit: contain;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
